<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <!--兼容设置-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit"/>

    <title>用户信息页面</title>
    <div class="hoem_page"><a href="index.html">返回主页</a></div>
    <!--图标-->
    <link rel="shortcut icon" type="image/icon" href="../images/joveImg/favicon.png"/>

    <!--导入核心文件-->
    <script src="../bootstrap3/js/holder.js"></script>
    <script src="../bootstrap3/jquery-1.9.1.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.js"></script>

</head>
<style>
    .infoDiv{
        background-color: #0094ff;
        width: 100vw;
        height: 100vh;
        text-align: center;
        padding: 24px 0;
    }
    .hoem_page{
        position: fixed;
        top: 40px;
        left: 40px;
        font-size: 20px;
    }
    .hoem_page a{
        color: #fff;
        text-decoration: none;
    }
    .title{
        font-size: 20px;
        color: #fff;
    }
    #form-info{
        font-size: 20px;
    }
    #btn-info{
        font-size: 20px;
        margin-top: 10px;
    }
</style>
<body>
<div class="infoDiv">
    <p class="title">用户基本信息</p>
    <!--表单-->
    <form id="form-info" role="form">
        <label>用户名
            <input id="username" name="username" type="text" title="无法修改" readonly>
        </label><br>

        <label>真实姓名
            <input id="realname" name="realname" type="text" title="无法修改" readonly>
        </label><br>

        <label>性别
            <input id="gender" name="gender" type="text" value="1" title="无法修改" readonly>
        </label><br>

        <label>出生日期
            <input id="birthday" name="birthday" title="无法修改" type="text" readonly>
        </label><br>

        <label>身高(cm)
            <input id="height" name="height" type="text" pattern="\d{2,3}(\.\d{1,2})?" required>
        </label><br>

        <label>体重(kg)
            <input id="weight" name="weight" type="text" pattern="\d{2,3}(\.\d{1,2})?" required>
        </label><br>

        <label>所在省份
            <select id="city" name="city" required>
                <option>北京</option>
                <option>天津</option>
                <option>河北</option>
                <option>山西</option>
                <option>内蒙古</option>
                <option>辽宁</option>
                <option>吉林</option>
                <option>黑龙江</option>
                <option>上海</option>
                <option>江苏</option>
                <option>浙江</option>
                <option>安徽</option>
                <option>福建</option>
                <option>江西</option>
                <option>山东</option>
                <option>河南</option>
                <option>湖北</option>
                <option>湖南</option>
                <option>广东</option>
                <option>广西</option>
                <option>海南</option>
                <option>重庆</option>
                <option>四川</option>
                <option>贵州</option>
                <option>云南</option>
                <option>西藏</option>
                <option>陕西</option>
                <option>甘肃</option>
                <option>青海</option>
                <option>宁夏</option>
                <option>新疆</option>
                <option>香港</option>
                <option>澳门</option>
                <option>台湾</option>
                <option>海外</option>
            </select>
        </label><br>

        <label>学历
            <select id="academicQualification" name="academicQualification" placeholder="请选择学历" required>
                <option>小学</option>
                <option>初中</option>
                <option>高中</option>
                <option>专科</option>
                <option>本科</option>
                <option>硕士研究生</option>
                <option>博士研究生</option>
            </select>
        </label><br>

        <label>职业
            <input id="profession" name="profession" type="text" required>
        </label><br>

        <label>年收入(元)
            <input id="annualIncome" name="annualIncome" type="number" min="0" max="2000000000" required>
        </label><br>

        <label>个人简介
            <textarea id="personalProfile" name="personalProfile"></textarea>
        </label><br>

        <label>电话号码
            <input id="phoneNumber" name="phoneNumber" type="tel" pattern="1[0-9]{10}" placeholder="请输入电话号码">
        </label><br>

        <label>电子邮箱
            <input id="emailAddress" name="emailAddress" type="email" placeholder="请输入电子邮箱">
        </label><br>

        <label>所在公司
            <input id="company" name="company" type="text" placeholder="请输入所在公司">
        </label><br>

        <label>毕业院校
            <input id="school" name="school" type="text">
        </label><br>

        <label>微信号
            <input id="wxid" name="wxid" type="text">
        </label><br>

        <label>兴趣爱好
            <textarea id="hobby" name="hobby"></textarea>
        </label><br>

        <label>优点
            <textarea id="pros" name="pros"></textarea>
        </label><br>

        <label>缺点
            <textarea id="cons" name="cons"></textarea>
        </label><br>

        <label>关于家庭
            <textarea id="aboutFamily" name="aboutFamily"></textarea>
        </label><br>

        <label>恋爱史
            <input id="romanceHistory" name="romanceHistory" type="number" min="0" max="100">
        </label><br>

        <input id="btn-info" type="button" value="修改信息"/><br>
    </form>
</div>

<script type="text/javascript">
    $("#btn-info").click(function () {
        $.ajax({
            url: "/users/update_info",
            type: "POST",
            data: $("#form-info").serialize(),
            dataType: "JSON",
            success: function (json) {
                if (json.state === 100) {
                    alert("修改成功！");
                    location.href = "index.html";
                } else {
                    alert("修改失败！" + json.message);
                }
            },
            error: function (xhr) {
                alert("修改失败，未知错误：" + xhr.status);
            }
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {
            $.ajax({
                url: "/users/get_by_uid",
                type: "GET",
                data: $("#form-info").serialize(),
                dataType: "JSON",
                success: function (json) {
                    if (json.state === 100) {
                        $("#username").val(json.data.username);
                        $("#realname").val(json.data.realname);
                        $("#gender").val(json.data.gender);
                        $("#birthday").val(json.data.birthday.substring(0, 10));
                        $("#height").val(json.data.height);
                        $("#weight").val(json.data.weight);
                        $("#city").val(json.data.city);
                        $("#academicQualification").val(json.data.academicQualification);
                        $("#profession").val(json.data.profession);
                        $("#annualIncome").val(json.data.annualIncome);
                        $("#personalProfile").val(json.data.personalProfile);
                        $("#phoneNumber").val(json.data.phoneNumber);
                        $("#emailAddress").val(json.data.emailAddress);
                        $("#company").val(json.data.company);
                        $("#school").val(json.data.school);
                        $("#wxid").val(json.data.wxid);
                        $("#hobby").val(json.data.hobby);
                        $("#pros").val(json.data.pros);
                        $("#cons").val(json.data.cons);
                        $("#aboutFamily").val(json.data.aboutFamily);
                        $("#romanceHistory").val(json.data.romanceHistory);
                    } else {
                        alert("用户信息加载失败！");
                    }
                },
                error: function (xhr) {
                    alert("用户信息加载失败，未知错误：" + xhr.status);
                }
            });
        }
    );
</script>
</body>
</html>